<#include "/common/head.ftl">

<@showTitle title="${i18n.getMessage('bookstore.item')} > ${i18n.getMessage('list')}">
	<a href="#" onclick="cc('bookstore/showAddItem.sgt?programId=${(programId)!}&id=${id!}')">${i18n.getMessage('add')}</a>
</@showTitle>

<#if (message??)>
	<div id="info">
		${message!}
	</div>
</#if>

<form name="myform" action="bookstore/showListOfItem.sgt" onsubmit="submitForm(this); return false;">
	<table id="dataTable" align="center" cellspacing="5" cellpadding="0">
		<tr>
			<td class="name1">${i18n.getMessage('program')}:</td>
			<td>
				<select name="programId" style="width:204px" onchange="updateFilter(this)">
					<#list programs as each>
						<option value="${(each.id)!}" <#if (each == program!)>selected</#if>>
							${(each.name)!}
						</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name1">${i18n.getMessage('bookstore.item.type')}:</td>
			<td>
				<select name="typeId" style="width:204px" onchange="updateFilter(this)">
					<option></option>
					<#list types as each>
						<option value="${(each.id)!}" <#if (each == type!)>selected</#if>>
							${(each.name)!}
						</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name1"></td>
			<td>
				<input type="submit" id="filter" value="${i18n.getMessage('Filter')}" class="button_style"/>				
			</td>
		</tr>
	</table>
</form>

<@display.table id="listTable" name="items" pagesize="20">
	<@display.column title="${i18n.getMessage('index')}" style="text-align:center">
		${(listTable_rowNum)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('bookstore.title.name')}">
		${(listTable.itemTitle.title)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('bookstore.item.type')}">
		${(listTable.itemType.name)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('bookstore.item.id')}">
		${(listTable.itemId)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('bookstore.item.price')}" style="text-align:center">
		${(listTable.price.amount)!} ${i18n.getMessage('currency.vnd')}
	</@display.column>
	<@display.column title="${i18n.getMessage('quantity')}" style="text-align:center">
		${(listTable.quantity)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('level')}" style="text-align:center">
		${(listTable.itemTitle.levelsName)!}
	</@display.column>
	<@display.column title="${i18n.getMessage('edit')}" style="text-align:center;width:50px;">
		<img src="images/edit.gif" onclick="cc('bookstore/showEditItem.sgt?id=${listTable.id}&programId=${(programId)!}')" style="cursor:pointer"/>
	</@display.column>
	<@display.column title="${i18n.getMessage('delete')}" style="text-align:center;width:50px;">
		<img src="images/delete.gif" onclick="if(confirm('${i18n.getMessage('dialog.delete')}')) { cc('bookstore/deleteItem.sgt?id=${listTable.id}&programId=${programId!}'); }" style="cursor:pointer"/>
	</@display.column>
</@display.table>

<br/><br/>

<script>
	updateFilter = function(obj) {
    	document.getElementById('filter').click();
    }
</script>